<!-- 管理后台布局页 -->
<template>
  <a-layout class="my-layout">
    <!--    页头-->
    <!--    <a-layout-header class="my-header">-->
    <!--        <page-header></page-header>-->
    <!--    </a-layout-header>-->
    <!--    内容区域-->
    <a-layout-content class="my-content">
      <!--      左侧菜单-->
      <a-layout class="sub-layout">
        <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
          <div class="text-center margin-top-20 margin-bottom-20">
            <img style="width: 30px" src="../assets/img/logo3.png" v-if="collapsed">
            <img class="width80" src="../assets/img/logo2.png" v-else>

          </div>

          <a-menu mode="inline" :items="items" theme="dark" @click="handleMenuClick" v-model:openKeys="openKeys"
            v-model:selectedKeys="selectedKeys">
          </a-menu>
        </a-layout-sider>
        <!--        右侧内容-->
        <a-layout-content class="sub-content">
          <!--          面包屑-->
          <div class=" sub-title">
            <div class="float-left">
              <MenuUnfoldOutlined v-if="collapsed" @click="collapsed = !collapsed" class="cursor-pointer" />
              <MenuFoldOutlined v-else @click="collapsed = !collapsed" class="cursor-pointer" />
            </div>
            <div class="float-left">
              <a-breadcrumb class="my-bread">
                <a-breadcrumb-item @click="$router.push('/')"><a>首页</a></a-breadcrumb-item>
                <a-breadcrumb-item v-if="breadCrumbVO.groupName"><a>{{ breadCrumbVO.groupName }}</a></a-breadcrumb-item>
                <a-breadcrumb-item v-if="breadCrumbVO.menuName">{{ breadCrumbVO.menuName }}</a-breadcrumb-item>
              </a-breadcrumb>
            </div>
            <div class="float-right">
              <a-dropdown>
                <span @click.prevent>
                  <a-avatar>{{ nickName?.substring(0, 1) }}</a-avatar>
                  {{ nickName }}
                  <icon iconName="CaretDownFilled"></icon>
                </span>
                <template #overlay>
                  <a-menu>
                    <a-menu-item>
                      <a href="/userHome">
                        <icon icon-name="UserOutlined"></icon>
                        &nbsp;
                        个人中心
                      </a>
                    </a-menu-item>
                    <a-menu-item>
                      <a href="/resetPassword">
                        <icon icon-name="LockOutlined"></icon>
                        &nbsp;
                        修改密码
                      </a>
                    </a-menu-item>
                    <a-menu-item>
                      <a href="javascript:;" @click="handleLogout">
                        <icon icon-name="PoweroffOutlined"></icon>
                        &nbsp;
                        退出登录
                      </a>
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </div>
            <div class="clear"></div>
          </div>
          <!--          页面-->
          <router-view class="my-page"></router-view>
          <!--          页脚-->
          <div class="clear text-center margin-bottom-20">keller-service</div>
        </a-layout-content>
      </a-layout>
    </a-layout-content>
  </a-layout>
</template>
<script lang="ts">
import PageHeader from "@/components/PageHeader.vue";
import PageFoot from "@/components/PageFoot.vue";

import * as resourcesApi from "@/api/AuthResourceApi";
import * as apiUtil from "@/api/ApiUtils";
import { h } from "vue";

import { getIcon } from "@/utils/IconUtils";

import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  SettingOutlined,
} from "@ant-design/icons-vue";
import Icon from "@/components/Icon.vue";
import * as authUtil from "@/ts/AuthUtils";
import { permit } from "@/ts/AuthUtils";

export default {
  components: {
    Icon,
    PageFoot,
    PageHeader,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    SettingOutlined,
  },
  data() {
    return {
      items: [],
      openKeys: [],
      selectedKeys: [],
      collapsed: false,
      breadCrumbVO: {
        groupName: "",
        menuName: "",
      },
      nickName: "Keller",
      authUser: {},
    };
  },
  methods: {
    handleMenuClick(e) {
      console.log("handleMenuClick", e);
      this.$store.dispatch("selectedItem", e);
      localStorage.setItem("selectedMenuItem", JSON.stringify(e));
      this.breadCrumbVO.menuName = e.item.originItemValue.label;
      this.breadCrumbVO.groupName = e.item.title;
      this.$router.push(e.key);
    },
    handleLogout() {
      //TODO 清除浏览器缓存，清除服务器缓存
      localStorage.clear();
      this.$router.push("/login");
    },
  },
  computed: {},
  watch: {},
  created() {
    const storedItem = localStorage.getItem("selectedMenuItem");
    if (storedItem) {
      this.$store.dispatch("selectedItem", JSON.parse(storedItem));
    }
  },
  mounted() {
    this.authUser = authUtil.getAuthUser();
    this.nickName = this.authUser.nickName;
    resourcesApi.userMenu().then((res) => {
      if (apiUtil.isSuccessed(res)) {
        this.items = res.data;
        for (let item of this.items) {
          item.icon = h(getIcon(item.iconName));
          item.type = null;
          for (let child of item.children) {
            child.icon = h(getIcon(child.iconName));
          }
        }
      }
    });
    const selectedItem = this.$store.state.selectedItem;
    this.openKeys.push(selectedItem?.keyPath[0]);
    this.selectedKeys.push(selectedItem?.keyPath[1]);
    this.breadCrumbVO.menuName = selectedItem?.item.originItemValue.label;
    this.breadCrumbVO.groupName = selectedItem?.item.originItemValue.title;
  },
};
</script>
<style scoped>
.my-layout {
  /* 设置为视口高度 */
  height: 100vh;
}

.sub-content {
  flex: 1; /* 自适应内容区域高度 */
  overflow-y: auto; /* 防止内容溢出 */
  margin: 0;
  padding: 0;
}

.sub-layout {
  height: 100%;
}

.sub-title {
  height: 48px;
  line-height: 48px;
  font-size: 16px;
  background-color: white;
  padding: 0 16px;
}

.my-bread {
  padding-top: 14px;
  padding-left: 10px;
}

.my-page {
  margin: 20px;
  border-radius: 10px;
  background-color: white;
}
</style>